/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React,{Fragment} from 'react';
import { observer } from 'mobx-react';
import {Modal, Form, Alert} from 'antd';
import store from './store';
import FormPointPicker from "../../components/form/FormPointPicker";
import FormInput from "../../components/form/FormInput";
import FormMulInput from "../../components/form/FormMulInput";
import FormSelect from "../../components/form/FormSelect";
import FormMulSelect from "../../components/form/FormMulSelect";
import FormTimePicker from "../../components/form/FormTimePicker";
import FormDatePicker from "../../components/form/FormDatePicker";
import FormMonthPicker from "../../components/form/FormMonthPicker";
import FormYearPicker from "../../components/form/FormYearPicker";
import FormRadio from "../../components/form/FormRadio";
import FormCheckBox from "../../components/form/FormCheckBox";
import FormPasswordInput from "../../components/form/FormPasswordInput";
import FormUpload from "../../components/form/FormUpload";

@observer
class ComForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,

      password: null,
      addZone: null,
      editZone: store.record.zone,
    }
  }

  handleSubmit = () => {
      this.props.form.validateFields((err, formData) => {
        if (!err){
          this.setState({loading: true});
          formData['id'] = store.record.id;
          console.log(formData);
          this.setState({loading: false});
        }
      });
  };

  render() {
    const info = store.record;
    const {loading} = this.state;
    return (
       <Fragment>

         <Modal
             visible
             width={800}
             maskClosable={false}
             title={store.record.id ? '编辑' : '新建'}
             okText="提交"
             onCancel={() => store.formVisible = false}
             confirmLoading={loading}
             onOk={this.handleSubmit}>
           <Alert closable showIcon type="info" message={"小提示"}
                  style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}}
                  description="请填写以下表单来新增数据"/>

           <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>

             <FormUpload field={"file"} form={this.props.form} label={"单文件上传"} single fileType={["image/png","image/jpeg"]} />

             <FormUpload field={"mul_file"} form={this.props.form} label={"多文件上传"} single fileType={["image/png","image/jpeg"]} />

             <FormInput label={"输入框"} field={"input"}  form={this.props.form} allowClear placeholder="输入框"/>

             <FormMulInput label={"多行输入框"} field={"mul_input"} form={this.props.form} placeholder="多行输入框" rows={2} allowClear={true}/>

             <FormSelect label={"下拉选择框"} field={"dropdown_list"} form={this.props.form} options={{a:"a",b:"b",c:"c"}} allowClear showSearch placeholder="下拉选择框" />

             <FormMulSelect label={"下拉选择框-多选"} field={"mul_dropdown_list"} form={this.props.form} options={{a:"a",b:"b",c:"c"}} showSearch placeholder="下拉选择框-多选" />

             <FormTimePicker label={"时间选择框"} field={"time_picker"} form={this.props.form} placeholder="时间选择框"/>

             <FormDatePicker label={"日期选择框"} field={"date_picker"} form={this.props.form} placeholder="日期选择框"/>

             <FormMonthPicker label={"月份选择框"} field={"month_picker"} form={this.props.form} placeholder="月份选择框"/>

             <FormYearPicker label={"年份选择框"} field={"year_picker"} form={this.props.form} placeholder="年份选择框" />

             <FormRadio label={"单选框"} field={"check_box"} form={this.props.form} options={{a:"a",b:"b",c:"c"}} placeholder="单选框" />

             <FormCheckBox label={"多选框"} field={"check_box_list"} form={this.props.form} options={{a:"a",b:"b",c:"c"}} placeholder="多选框"/>

             <FormPointPicker placeholder={"经纬度选择"} form={this.props.form} field={"lng_lat"} initialValue={info['lng_lat']}/>

             <FormPasswordInput label={"密码输入框"} field={"password"}  form={this.props.form} allowClear placeholder="密码输入框"/>

           </Form>
         </Modal>
       </Fragment>
    )
  }
}

export default Form.create()(ComForm)
